<template>
  <a-modal
  title="添加客户记录"
  :visible="visible"
  @ok="handleOk"
  :confirmLoading="confirmLoading"
  @cancel="handleCancel"
  >
    <a-form  :form='form'>
      <a-form-item label='日期' :label-col='{ span : 4}'  :wrapper-col="{ span : 18 }" >
          <a-date-picker    @change="onChange"   v-decorator="['clientDate',formRule.date]"/>
      </a-form-item>
      <a-form-item label='联系人' :label-col='{ span : 4}'  :wrapper-col="{ span : 18 }" >
          <a-input placeholder="请输入"  v-decorator="['contact',formRule.name]"/>
      </a-form-item>
      <a-form-item label='联系电话' :label-col='{ span : 4}'  :wrapper-col="{ span : 18 }" >
          <a-input placeholder="请输入"  v-decorator="['phone']"/>
      </a-form-item>
      <!-- <a-form-item label='联系邮箱' :label-col='{ span : 4}'  :wrapper-col="{ span : 18 }" >
           <a-input placeholder="请输入"  v-decorator="['mail']"/>
      </a-form-item> -->
       <a-form-item  style='display: none;' >
           <a-input   v-decorator="['entCode']"/>
      </a-form-item>
      <a-form-item  style='display: none;' >
           <a-input   v-decorator="['code']"/>
      </a-form-item>
      <!-- <a-form-item  class='mb0'
          v-for="(k, index) in form.getFieldValue('keys')"
          :key="k"
          v-bind="index === 0 ? formItemLayout : formItemLayoutWithOutLabel"
          :label="index === 0 ? '联系方式' : ''"
        >
        <a-row>
          <a-col :sm='{span:6}' :xs='20' >联系人：
                <a-input   placeholder='联系人'  v-decorator="[
                    `names[${k}].name`,
                  ]"  />&nbsp;&nbsp;
            </a-col>
            <a-col  :sm='{span:6,offset:1}'  :xs='20'>电话：
                <a-input  placeholder='联系电话'  v-decorator="[
                    `names[${k}].phone`,
                    
                  ]"   /> 
              </a-col>
            <a-col  :sm='{span:6,offset:1}'  :xs='20'>email：
                <a-input  placeholder='邮箱'  v-decorator="[
                    `names[${k}].email`,
                    
                  ]"  /> 
            </a-col>
            <a-col  :sm='{span:2,offset:1}' >
                <a-button  shape="circle" icon="delete"  type='danger'  class='ml10 mt28'  @click='() => remove_contact(k)'></a-button>
            </a-col>
        </a-row>  
      </a-form-item> -->
      <!-- <a-form-item
          v-bind='formItemLayoutWithOutLabel'
      >
            <a-button type="dashed"  class='cursor  mt12'  block  @click='addContact()' ><a-icon type="plus-circle" />添加</a-button>
        </a-form-item> -->
      <a-form-item label='备注'  :label-col='{ span : 4}'  :wrapper-col="{ span : 18 }">
          <a-textarea type='textarea'  :rows='5'   v-decorator="['remark',formRule.recordTip]"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
  import  { submitContact,contactDetail }  from  '@/api/customer/index'
  import moment  from  'moment'
export default {
  name: 'approateRec',
  props:{
      visible:{
        type:Boolean,
        default:false
      },
      entCode:{
        type:String,
        default:''
      }
  },
  data () {
    return {
      confirmLoading: false,

      formRule:{
        date:{ rules : [ { required:true,message:'请选择日期' } ] },
        recordTip:{ rules : [ { required:true,message:'请输入' },{ whitespace : true ,message:'当前输入不能为空'} ] },
        name:{ rules : [ { required:true,message:'请输入联系人' },{ whitespace : true ,message:'当前输入不能为空'} ] },
      },
      currentIndex:null,//编辑状态下所需的index
      isEdit:false,
      // formItemLayoutWithOutLabel: {   //新增联系人label
      //     wrapperCol: {
      //       xs: { span: 24, offset: 0 },
      //       md: { span: 16, offset: 5 },
      //       lg: { span: 14, offset: 7 },
      //       xl: { span: 11, offset: 7 },
      //       xxl: { span: 8, offset: 7 },
      //     },
      //   },
      // id:0,
    }
  },
  methods:{
    //提交客户约谈添加信息
    handleOk(e) {
      let that = this , url
      that.form.setFieldsValue({entCode:that.entCode})
        this.form.validateFields((err, values) => {
          if (!err) {
            this.confirmLoading = true;
            // console.log('Received values of form: ', values);

            values.remark = values.remark.replace(/</g, '&lt;'); //
            values.remark = values.remark.replace(/>/g, '&gt;'); //
            values.remark = values.remark.replace(/\n/g, '<br/>');
            values.remark = values.remark.replace(/\s/g, '&nbsp;'); //空格处理
            // console.log(values.remark.toString())
            
            if(that.isEdit == false){
              url = '/op/client_history/create_client_history' //新增 联系记录
            }
            else{
              url = '/op/client_history/modify_client_history'
            }

            submitContact(url,values).then((res)=>{
                if(res.data.flag == true){
                    that.confirmLoading = false;
                    that.form.setFieldsValue({code:'',entCode:''})
                    that.$emit('handleOk',res.data.msg)
                }
            })
          }
          else{
            console.log(err)
          }
        });
    },
    handleCancel(e) {
      this.$emit('handleCancel')
      // this.visible = false
    },
    onChange(date, dateString) {
      // console.log(date, dateString);
    },
    /*添加联系人*/
    // addContact(){
    //   const { form } = this;
    //   // can use data-binding to get
    //   const keys = form.getFieldValue('keys');
    //   const nextKeys = keys.concat(++this.id);
    //   // can use data-binding to set
    //   // important! notify form to detect changes
    //   form.setFieldsValue({
    //     keys: nextKeys,
    //   });
    // },
    /*移除联系人*/
    // remove_contact  (k) {
    //   const { form } = this;
    //   // can use data-binding to get
    //   const keys = form.getFieldValue('keys');
    //   // We need at least one passenger
    //   if (keys.length === 1) {
    //   return;
    //   }

    //   // can use data-binding to set
    //   form.setFieldsValue({
    //   keys: keys.filter(key => key !== k),
    //   });
    // },
  },
  mounted(){
    this.$nextTick(()=>{
      this.$on('openDialog',function(){
        this.isEdit = false
        /*清空表单输入和校验*/
        this.form.resetFields()
      })
      this.$on('editDialog',function(code){
        this.isEdit = true
        /*清空表单输入和校验*/
        this.form.resetFields()
        contactDetail(code).then((res)=>{
          let data = res.data.data
          console.log(data)

          let rec = data.remark
          if(rec != null){
              rec = rec.replace(new RegExp("<br/>", "g"), '\n');
              rec = rec.replace(new RegExp("&nbsp;", "g"), ' '); //空格处理
              rec = rec.replace(/&lt;/g, '<'); //
              rec = rec.replace(/&gt;/g, '>'); //
          }
            
          console.log(rec)
          this.form.setFieldsValue( { clientDate : moment(data.clientDate) , contact : data.contact , phone : data.phone , remark : rec , code : code } )
        })

      })
    })
  },
  computed: {
    // formItemLayout () {
    //   const { formLayout } = this;
    //   return formLayout === 'horizontal' ? {
    //     labelCol: {md:{span:5},lg:{ span: 7 }},  //label 标签布局
    //     wrapperCol: {xxl:{ span: 8 },xl:{ span : 11},lg:{ span :14 },md:{ span : 16 },xs:{ span :24}}, //需要为输入控件设置布局样式时，使用该属性，用法同 labelCol
    //   } : {};
    // },
  },
  beforeCreate () {
    this.form = this.$form.createForm(this);
    // this.form.getFieldDecorator('keys', { initialValue: [0], preserve: true });
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color .3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;line-height: 32px;
  background: rgba(255,255,255,.2);
  margin: 16px;
  color:#fff;
}
.header-right .right-index {display: inline-block; padding:0 12px;height: 100%;cursor: pointer;}
.header-right .right-index:hover {background:rgba(0,0,0,.025)}
</style>
